<template>
  <div>
    <ul class="list">
      <router-link tag="li" v-for="(data, index) in datas" :key="index" :class="{'hairlines-top': index > 0}" :to="'/detail/' + data.sid">
        <div class="img">
          <img :src="data.thumb || 'static/default.png'">
        </div>
        <div class="desc">
          <h3 class="ellipsis">{{data.name}}</h3>
          <div class="keywords">{{data.service}}</div>
          <div class="site">
            <span><i class="iconfont icon-dingwei"></i></span>
            <span class="address">{{data.street_name}}</span>
            <span class="distance">{{data.distance ? data.distance + 'km' : '太远啦'}}</span>
          </div>
        </div>
      </router-link>
    </ul>
    <div class="loading" v-if="isLoading">
      <div class="circular">
        <svg class="anim-rotate" width="40" height="40">
          <circle class="anim-circle" cx="20" cy="20" r="13" fill="#fff" stroke="#72a5ef" stroke-width="3"></circle>
        </svg>
      </div>
    </div>
    <div class="lists-end">
      <p v-if="!end"></p>
      <p v-else>我是有底线的</p>
    </div>
  </div>
</template>
<script>
  import defaultImg from '../../../static/default.png'

  export default {
    name: 'businessLists',
    props: {
      datas: Array,
      isLoading: Boolean,
      end: Boolean
    },
    data () {
      return {
        errorImg: defaultImg
      }
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .list{
    background: #fff;
    padding: 0 rem(24);
    li{
      padding: rem(33) 0 rem(33) rem(133);
      position: relative;
    }
    .img{
      position: absolute;
      top: rem(33);
      left: 0;
      img{
        width: rem(115);
        height: rem(115);
        border-radius: 4px;
      }
    }
    .desc{
      position: relative;
      height: rem(115);
      h3{
        position: absolute;
        top: 0;
        left: 0;
        font-size: rem(28);
      }
      .keywords{
        padding: rem(38) 0 ;
        flex: 1;
        font-size: rem(24);
        color: #f35a5d;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .site{
        position: absolute;
        bottom: -3px;
        left: 0;
        right: 0;
        font-size: rem(24);
        color: #999;
        display: flex;
        align-items: center;
        .iconfont{
          font-size: 16px;
        }
        .address{
          display: inline-block;
          vertical-align: top;
          width: 70%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .distance{
          float: right;
          color: #fa5559;
        }
      }
    }
  }
  .lists-end{
    background: #f5f5f5;
    padding: rem(22) 0 rem(120) 0;
    min-height: rem(22);
    font-size: rem(22);
    color: #999;
    text-align: center;
  }
  .loading{
    padding: rem(40) 0 rem(70);
    background: #f5f5f5;
    .circular{
      position: relative;
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
    }
  }
</style>
